<template>
  <div class="shopcart" >
      <div class="content" @click="toggleList()">
          <div class="content-left" :class="{'highlight':totalCount>0}">
              <div class="logo-wrapper">
                  <div class="logo">
                    <img src="./shopcart.png">
                  </div>
                  <div class="num" v-show="totalCount>0">{{totalCount}}</div>
              </div>
              <div class="price">¥{{totalPrice}}</div>
              <div class="desc">另需配送费{{deliveryprice}}元</div>
          </div>
          <div class="content-right" @click.stop.prevent="pay">
              <div class="pay" :class="{'payDescHight':totalPrice>=minprice}">
                  {{payDesc}}
              </div>
          </div>
      </div>
     <transition name="fold">
	      <div class="shopcart-list" v-show="listShow">
	        <div class="list-header">
	            <h1 class="title">购物车</h1>
	            <span class="empty" @click="empty()">清空</span>
	            </h1>
	        </div>
	        <div class="list-content" ref="listcontent">
	            <ul>
	                <li class="food" v-for="food in selectfoods">
	                    <span class="name">{{food.name}}</span>
	                    <div class="price">
	                        <span>¥{{food.price * food.count}}</span>
	                    </div>
	                    <div class="cartcontrol-wrapper">
	                        <cartcontrol :food="food"></cartcontrol>
	                    </div>
	                </li>
	            </ul>
	        </div>
	      </div>
      </transition>
      <transition name="list-mask-fade">
        <div class="list-mask" v-show="listShow"></div>
      </transition>
  </div>
</template>

<script>
    import Scroll from 'better-scroll'
    import cartcontrol from '@/components/cartcontrol/cartcontrol.vue'
    export default {
        data(){
            return {
                fold:true
            }
        },
        props:{
            selectfoods:{
                type:Array,
                default(){
                    return [
                        // {
                        //     price:10,
                        //     count:2
                        // }
                    ]
                }
            },
            deliveryprice:{
                type:Number,
                default:0,
            },
            minprice:{
                type:Number,
                default:0,
            }
        },
        computed: {
            totalPrice(){
                let total = 0;
                this.selectfoods.forEach((food)=>{
                    total += food.price * food.count
                })
                return total
            },
            totalCount(){
                let count = 0;
                this.selectfoods.forEach((food)=>{
                count += food.count
                })
                return count
            },
            payDesc(){
                if(this.totalPrice === 0){
                    return `¥${this.minprice}元起送` 
                }else if(this.totalPrice<this.minprice)
                    {
                    let diff =this.minprice -this.totalPrice
                    return `还差¥${diff}元起送`
                }else{
                    return '去结算'
                }
            },
            listShow(){
                if(!this.totalCount){
                    this.fold=true
                    return false
                }
                let show = !this.fold
                if(show){
                    this.$nextTick(()=>{
                        if(!this.scroll){
                            this.scroll = new Scroll(this.$refs.listcontent,{
                            click:true
                             })
                        }else{
                            this.scroll.refresh()
                        }
                        
                    })
                }
                return show
            }
        },
        components:{
            cartcontrol
        },
        methods:{
           toggleList(){
                if(!this.totalCount){
                    this.fold=true
                    return;
                    }
                this.fold=!this.fold
           },
           empty(){
               this.selectfoods.forEach((food)=>{
                   food.count=0
               })
           },
           pay(){
               if(this.totalPrice<this.minprice){
                   return
               }
               alert('支付'+this.totalPrice)
           }
        }
    }
</script>
<style>
.shopcart{
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 46px;
    z-index: 999;
}
.shopcart .content{
 display: flex;
 background: #141d27;
 z-index: 999;
}
.shopcart .content .content-left{
    flex: 1;
    text-align: left;
}
.shopcart .content .content-left .logo-wrapper{
    display: inline-block;
    position: relative;
    top: -10px;
    margin: 0 6px;
    padding: 6px;
    width: 56px;
    height: 56px;
    box-sizing: border-box;
    vertical-align: top;
    border-radius: 50%;
    background: #141d27;
}
.shopcart .content .content-left .logo-wrapper .num{
    position: absolute;
    top: 8px;
    right: -5px;
    width: 24px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 16px;
    font-size: 9px;
    font-weight: 400;
    color: #fff;
    background:rgb(240,20,20);
    box-shadow:0 4px 8px  rgba(0,0,0,0.4)
}
.shopcart .content .content-left .logo{
    /* background-color: #2b343c; */
    border-radius:50%; 
    padding:8px;
}
.shopcart .content .content-left .logo-wrapper img{
    width: 100%;
}
.shopcart .content .content-left .price{
    display: inline-block;
    vertical-align: top;
    margin-top: 12px;
    line-height: 24px;
    padding-right: 12px;
    box-sizing: border-box;
    border-right: 1px solid rgba(255,255,255,.1);
    font-size: 16px;
    font-weight: 700;
    color: rgba(255,255,255,.4);
}
.shopcart .content .content-left .desc{
    display: inline-block;
    vertical-align: top;
    line-height: 24px;
    margin: 12px 0 0 12px;
    font-size: 10px;
    color:  rgba(255,255,255,.4);
}
.shopcart .content .content-right{
    flex: 0 0 105px;
    width: 105px; 

}
.shopcart .content .content-right .pay{    
    height: 48px;
    text-align: center;
    line-height: 48px;
    font-size: 12px;
    color: rgba(255,255,255,.4);
    font-weight: 700;
    background-color: #2b333b;
}
.shopcart  .highlight .price{
    font-size: 16px !important ;
    color: #fff !important ;
}
.payDescHight{
    background: #00b43c !important;
    color: #fff !important;
}
.shopcart-list{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    transition: all 0.3s;
	transform: translate3d(0,-100%,0);
}
.fold-enter-active,.fold-leave-active{
    transform: translate3d(0,0,0);
}
.shopcart-list .list-header{
    height: 40px;
    line-height: 40px;
    padding: 0 18px;
    background: #f3f5f7;
    border-bottom: 1px solid rgba(7, 17, 27, .1);
}
.shopcart-list .list-header .title{
    float: left;
    font-size: 14px;
    color: rgb(7,17,27);
}
.shopcart-list .list-header .empty{
    float: right;
    font-size: 12px;
    color:rgb(0,160,220);
}
.shopcart-list .list-content{
    padding: 0 18px;
    max-height: 217px;
    overflow: hidden;    
    background: #fff;
}
.shopcart-list .list-content .food{
    position: relative;
    padding: 12px 0;
    box-sizing: border-box;
    border-bottom: 1px solid  rgba(7, 17, 27, .1);
    text-align: left;
}
.shopcart-list .list-content .food .name{
    line-height: 24px;
    font-size: 14px;
    color:rgb(7,17,27);    
}
.shopcart-list .list-content .food .price{
    position: absolute;
    right: 90px;
    bottom: 12px;
    line-height: 24px;
    font-size: 14px;
    font-weight: 700;
    color:rgb(240,20,20)
}
.shopcart-list .list-content .food  .cartcontrol-wrapper{
    position: absolute;
    right: 0;
    bottom: 14px;
}
.list-mask{
    position: fixed;
    transition: all 0.1s;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-backdrop-filter: blur(10px);
     background: rgba(7, 17,27,0.6);
}
.list-mask-fade-enter-active,.list-mask-fade-enter-leave{
    opacity: 0;
    background: rgba(7, 17,27,0);
}
</style>
